import { connect } from 'dva';
import { history } from 'umi';
import * as THREE from 'three'
import { Button } from 'antd'
import { useEffect, useRef } from 'react';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

 const HomePage = (props) => {
   const sceneRef = useRef(null)
   const cameraRef = useRef(null)
   const rendererRef = useRef(null)
   const guiRef = useRef(null)
   const width = 1000; //宽度
   const height = 800; //高度
   useEffect(()=>{
    init()
   }, [])
   const init = () => {
      // 0.添加GUI
      const eventObj = {
        Fullscreen: function(){
         document.body.requestFullscreen()
        },
        Exitscreen: () => {
          document.exitFullscreen()
        }
      }
      guiRef.current = new GUI()
      guiRef.current.add(eventObj, "Fullscreen").name('全屏')
      guiRef.current.add(eventObj, "Exitscreen").name('退出全屏')

      // 1.创建3D场景对象Scene
      sceneRef.current = new THREE.Scene();

      // 4.创建一个长方体几何对象Geometry
      setCube()

      // 2. 定义虚拟相机部分
      setCamera()

      // 5. 坐标辅助器
      const axesHelper = new THREE.AxesHelper(500)
      sceneRef.current.add(axesHelper)

      // 3.渲染器
      setRenderer()

      // 全屏 rendererRef.current.domElement.requestFullscreen()
      window.addEventListener("resize",()=>{
        rendererRef.current.setSize(window.innerWidth,window.innerHeight);
        cameraRef.current.aspect = window.innerWidth/window.innerHeight;
        cameraRef.current.updateProjectionMatrix()
      })

   }
   // 创建相机
   const setCamera = () => {
      // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
      cameraRef.current = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
      // 实例化一个透视投影相机对象
      // 根据需要设置相机位置具体值
      cameraRef.current.position.set(150, 150, 150);
      cameraRef.current.lookAt(0,0,0);//指向mesh对应的位置
   }
   // 创建几何体
   const setCube = () => {
    const geometry = new THREE.BoxGeometry(10, 10, 10); 
    //创建一个材质对象Material
    const material = new THREE.MeshBasicMaterial({
      color: 0x00ff00,//0xff0000设置材质颜色为红色
    }); 
    // 两个参数分别为几何体geometry、材质material
    const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

    // 设置一个父元素
    const parentGeometry = new THREE.BoxGeometry(50, 50, 50);
    const parentMaterial = new THREE.MeshBasicMaterial({
      color: 0xff0010,
    });  

    const parentMesh = new THREE.Mesh(parentGeometry, parentMaterial);
    parentMesh.add(mesh);
    sceneRef.current.add(parentMesh)
    //设置网格模型在三维空间中的位置坐标，默认是坐标原点
    parentMesh.position.set(-60,10,0)
    mesh.position.set(70,0,0);

    guiRef.current.add(parentMesh.position, 'x').min(-50).max(50).step(1).name('父立方体x轴位置')
    guiRef.current.add(parentMesh.position, 'y').min(-20).max(20).step(1).name('父立方体y轴位置')
    guiRef.current.add(parentMesh.position, 'z').min(-30).max(30).step(1).name('父立方体x轴位置')

    let folder = guiRef.current.addFolder('子立方体位置')
    folder.add(mesh.position, 'x').min(-50).max(50).step(1).name('立方体x轴位置').onChange((val)=>{
      console.log("x轴位置-->", val)
    }).onFinishChange((val)=>{
      console.log('end-->', val)
    })
    folder.add(mesh.position, 'y').min(-50).max(50).step(1).name('立方体y轴位置')
    folder.add(mesh.position, 'z').min(-50).max(50).step(1).name('立方体z轴位置')

    guiRef.current.add(parentMaterial, 'wireframe').name('父立方体线框模式')

    let colorParams = {
      cubeColor: '#00ff00'
    }
    guiRef.current.addColor(colorParams, "cubeColor").name('子立方体颜色')
    .onChange((val)=>{
      mesh.material.color.set(val)
    })
    parentMesh.rotation.x = Math.PI /4; 
   }
   // 创建渲染器
   const setRenderer = () => {
      // 创建渲染器对象
      rendererRef.current = new THREE.WebGLRenderer();
      rendererRef.current.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
      rendererRef.current.render(sceneRef.current, cameraRef.current); //执行渲染操作
      document.getElementById('webgl').appendChild(rendererRef.current.domElement);
      // 6. 轨道控制器
      const controls = new OrbitControls(cameraRef.current, rendererRef.current.domElement)
      controls.enableDamping = true; //阻尼的惯性
      controls.dampingFactor = 0.01; // 阻尼系统
      // controls.autoRotate = true; //自动旋转 

      function animate(){
        requestAnimationFrame(animate)
        controls.update() 
        // mesh.rotation.x += 0.01;
        // mesh.rotation.y += 0.01;
        rendererRef.current.render(sceneRef.current, cameraRef.current)
      }
      animate()
   }
  const onFullScreen = () => {
    rendererRef.current.domElement.requestFullscreen()
  } 

  return (
    <div>
       <p>
        <Button type="primary" onClick={onFullScreen}>全屏</Button>
      </p>
      <div id="webgl" style={{marginTop: 10,marginLeft: 10}}></div>
    </div>
  );
}
export default connect(({common})=>({
  userInfo: common.userInfo,
}))(HomePage)